import React, { Fragment, useState } from 'react'
import { Layout, Collapse, Tabs } from 'antd'
// import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';

// 引入组件
import {
  LayoutComponent,
  PublicComponent,
  CustomComponent
} from '../../designer/dnd/DragOut'

const { Sider } = Layout
const { Panel } = Collapse;
const { TabPane } = Tabs;

interface IProps {
  children?: any
}

const MyLeftSide = (props: IProps) => {

  return (
    <Fragment>
      <Sider 
        width={230} 
        theme="light" 
        className='left-side'
      >
        <Tabs defaultActiveKey="1" >
          <TabPane tab='组件' key="1">
            <Collapse defaultActiveKey={ ["1", '2', '3'] } >
              <Panel header="布局组件" key="1" showArrow={false} >
                <LayoutComponent />
              </Panel>
              <Panel header="公共组件" key="2" showArrow={false}>
                <PublicComponent />
              </Panel>
              <Panel header="自定义组件" key="3" showArrow={false}>
                <CustomComponent />
              </Panel>
            </Collapse>
          </TabPane>
          <TabPane tab='其他' key="2">
            设置内容
          </TabPane>
        </Tabs>
      </Sider>
    </Fragment>
  )
}

export default MyLeftSide